<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <h1>JS 事件</h1>
    <hr>
    
    <button onclick="alert('啊,好疼!!!')" id="btn5">点我啊~</button>
    
    <button id="btn">要我啊</button>
    <button id="btn1">约我啊</button>

    <br>
    <button id="removeBtn">解绑</button>
    <br>

    <hr>
    <button id="jt">点击(事件监听)</button>


    <script>
    var btn = document.getElementById('btn');
    btn.onclick = function (){
        alert('不要不要, 叔叔我们 不＞(￣ε￣ = ￣3￣)<要');
    }

    var btn1 = document.getElementById('btn1');
    btn1.onclick = demo;
    function demo(){
        alert('不约不约,阿姨我们不约!!');
    }

    // JS事件监听 (标准)
    var jt = document.getElementById('jt');
    // IE兼容性 处理
    if (jt.addEventListener) {
        jt.addEventListener('click', demo, false);
        jt.addEventListener('click', function (){
            alert('你又监听我?!');
        }, false);
    } else {
        // 不可用,则做IE的兼容
        jt.attachEvent('onclick',function (){
            alert('你又监听我?!');
        });
        jt.attachEvent('onclick', demo);
    }

    function demo(){
        alert('你监听我?!');
    }


    // 解绑事件
    var remove = document.getElementById('removeBtn');
    remove.onclick = function (){
        // console.log(btn5);
        btn5.onclick = function (){}
        btn.onclick = null;
        btn1.onclick = null;
        // 解绑事件监听
        // jt.onclick = null; //NO
        // jt.removeEventListener('click', demo, false);
        jt.detachEvent('onclick', demo);
    }



    </script>
</body>
</html>